<template>
    <div>
        <a-modal
         v-model:visible="visible" 
         title="证件详情"  
         @ok="handleOk" 
         @cancel="visible = false"
         class="enterpriseInformationManagement-add-edit-enterDetails"
         width="100%"
         wrapClassName="n-1-enterpriseInformationManagement-enterDetails-modal"
         :footer="null"
        >
            <div v-if="visible" style="padding-bottom: 50px;">
                <a-spin tip="正在加载中..." :spinning="spinning">
                    <a-form :form="form" ref="form" class="form-descriptions-content-box">
                        <a-descriptions :column="4" bordered style="width: 100%;">
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    许可证编号
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.zjbh }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    企业名称
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.qymc }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    统一社会信用代码
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.tyshxydm }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    法定代表人
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.fddbr }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    企业负责人
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.qyfzr }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    质量负责人
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.zlfzr }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    注册地址
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.zcdz }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    生产地址
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.scdz }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item :span="4">
                                <span slot="label" class="descriptions-label-slot" >
                                    生产范围
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.scfw }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    分类码
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.flm }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    签发人
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.qfr }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    发证机关
                                </span>
                                <a-form-item class="zm-form-model">
                                   {{ formState.fzjg }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    日常监管管理机构
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.rcjdgljg }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    有效期始
                                </span>
                                <a-form-item class="zm-form-model">
                                    {{ formState.yxqs }}
                                </a-form-item>
                            </a-descriptions-item>
                            <a-descriptions-item>
                                <span slot="label" class="descriptions-label-slot">
                                    有效期止
                                </span>
                                <a-form-item class="zm-form-model">
                                   {{ formState.yxqz }}
                                </a-form-item>
                            </a-descriptions-item>
                        </a-descriptions>
                    </a-form>
                    <commpVxeTable
                        :key="refreshTable"
                        ref="headmanVxeTable"
                        :config="{
                            api:'',
                            rowId: 'id',
                            autoHidden:true,
                        }" 
                        :tableDataList="formState.zjbgnrList"
                        :columns="documentColumnsVxe" 
                        :formItem="[]"
                        :adaptiveHeight="true"
                        :isCanWrap="true"
                        tablePadding="0"
                        :conditionBtnRow="true"
                    > 
                        <template v-slot:bgnr_name="{row}" data-desc="自定操作栏">
                            <a-textarea v-model="row.bgnr" disabled :autosize="{ minRows: 1, maxRows: 3 }" />
                        </template>
                        <template v-slot:bgbz_name="{row}" data-desc="自定操作栏">
                            <a-textarea v-model="row.bgbz" disabled :autosize="{ minRows: 1, maxRows: 3 }" />
                        </template>
                        <template v-slot:bgsj_name="{row}" data-desc="自定操作栏">
                            {{ row.bgsj?moment(row.bgsj).format('YYYY-MM-DD'):'' }}
                        </template>


                        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item>
                                    <a-button class="blue-btn" type="primary" @click="detailsClick(row)" >详情</a-button>
                                </a-form-item>
                            </a-form> 
                        </template>
                    </commpVxeTable>
                </a-spin>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import serverEditingView from '@/components/comp-model-series/server-editing-view'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import moment from 'moment'
import YchConstant from "@/api/YchConstant";
import blobType from '@/common/blobType'
import { 
    xzxkqyqueryQyzjxx,
} from './service/index'
export default {
    components:{
        serverEditingView,
        compSelector,
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            catalogVisible:false,
            spinning:false,
            moment,
            refreshTable:null,
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fzlbz: [{
                    required: true,
                    message: '请输入质量标准',
                    trigger: 'blur',
                }],
                fgyslb: [{
                    required: true,
                    message: '请输入供应商类别',
                    trigger: 'blur',
                }],
                fscsmc: [{
                    required: true,
                    message: '请输入生产商名称',
                    trigger: 'blur',
                }],
                fscsdz: [{
                    required: true,
                    message: '请输入生产商地址',
                    trigger: 'blur',
                }],
                fgysdj: [{
                    required: true,
                    message: '请选择供应商等级',
                    trigger: 'blur',
                }],
                fgysdz: [{
                    required: true,
                    message: '请输入供应商地址',
                    trigger: 'blur',
                }],
                fwlyxq: [{
                    type:'object',
                    required: true,
                    message: '请选择审计有效期',
                    trigger: 'blur',
                }],
            },
            documentColumnsVxe:[{
                title: '变更内容', 
                field: 'bgnr',
                slots: {
                    // 使用插槽模板渲染
                    default: 'bgnr_name',
                },
            },{
                title: '变更备注', 
                field: 'bgbz',
                slots: {
                    // 使用插槽模板渲染
                    default: 'bgbz_name',
                },
            },{
                title: '变更时间', 
                field: 'bgsj',
                slots: {
                    // 使用插槽模板渲染
                    default: 'bgsj_name',
                },
                width:127,
            }],
            fjxxList:[],
            uploadLoading:false,
            materialClassList:[],
            selectMaterialClassId:[],
            existingDirectoryList:[],
            existingDirectoryKey:null,
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            this.spinning = true
            this.formState = {}
            // this.refreshTable = Date.now()
            xzxkqyqueryQyzjxx({zjid:val.zjid}).then(res=>{
                if(res.code == 200){
                    //console.log(res)
                    this.formState = res.result
                    this.refreshTable = Date.now()
                }else{
                    this.formState = {}
                    this.$message.warning(res.message)
                }
                this.spinning = false
            })
        },
        handleOk(){

        },
    }
}
</script>
<style lang="less">
.enterpriseInformationManagement-add-edit-enterDetails{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
            margin-bottom: 5px;
        }
        .ant-form-item-label{
            width: 130px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
    .material-table{
        width: 100%;
        border-color: #d9d9d9 !important;
    }
}
.file-td-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-between;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    padding: 8px;
    margin: 8px;
    position: relative;
    .delete-icon-v{
        font-size: 16px;
        position: absolute;
        color: rgb(24, 144, 255);
        right: 11px;
        top: 3px;
    }
    .eye-icon-v{
        font-size: 16px;
        position: absolute;
        color: rgb(24, 144, 255);
        right: 11px;
        top: 38px;
    }
    .download-icon-v{
        width: 20px;
        font-size: 16px;
        position: absolute;
        color: rgb(24, 144, 255);
        right: 9px;
        top: 20px;
    }
    .download-icon-apply{
        top: 10px;
    }
    .fjbz-text-v{
        color: #ff8000;
        font-size: 12px !important;
        display: inline-block;
        width: 28px;
        position: absolute;
        top: 5px;
        left: 3px;
    }
    .file-icon-v{
        font-size: 42px;
        color: rgb(24, 144, 255);
    }
    .file-icon-v{
        font-size: 42px;
        color: rgb(24, 144, 255);
    }
    span{
        height: 40px;
        display:block;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
    }
}
.n-1-enterpriseInformationManagement-enterDetails-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .ant-form-item-label{
    font-weight: 600;
  }
  .ant-modal-body {
    flex: 1;
    height: calc(100vh);
    overflow-y: auto;
    padding: 8px;
  }
  .ant-form-item-control{
    line-height: 20px !important;
  }
  .ant-form-item-control-wrapper{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  .ant-input-disabled{
    color: #242424 !important;
  }

}
.ant-upload-list{
    display: none;
}
.ant-upload-list-item{
    display: none !important;
}
.existing-table{
    width: 100%;
    border-color: #d9d9d9 !important;
    th,td{
        padding: 5px 10px;
    }
}
.enterpriseInformationManagement-enterDetails-form-box{
        // padding: 0 15px;
        
        // margin-top: 20px;
        margin-bottom: 8px;
        p {
            margin-block: 0px !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 150px !important;
            text-align: center;
            font-size: 16px;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
                margin-bottom: 0 !important;
            }

        }
        .descriptions-row .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 120px !important;//确保左侧固定文字不会换行
            justify-content: center;
            text-align: center;
        }
        .xhText{
            color: #f5222d;
            line-height: 31px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
            min-width: 100px;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }

    }
</style>